let NodeRootRedBall = document.getElementById("redBallBox");
let NodeRootBlueBall = document.getElementById("blueBallBox");

let selectedBalls = {
  R: [],
  B: []
}

let selectedMultiple = 1

window.addEventListener("load", function () {
  generateBall()

  let balls = document.querySelectorAll('.ball');
  // 监听每个球的点击事件
  balls.forEach(element => {
    element.addEventListener("click", function (e) {
      let _node = null;
      if (e.target.tagName === "SPAN") {
        _node = e.target.closest('.ball')
      } else {
        _node = e.target;
      }

      let NodeType = _node.parentNode.getAttribute("id") == 'redBallBox' ? 'R' : 'B'

      let number = parseInt(_node.querySelector('span').innerHTML)

      if (_node.className == "ball") {
        let condR = NodeType == 'R' && selectedBalls['R'].length < 6
        let condB = NodeType == 'B' && selectedBalls['B'].length == 0

        if (condR || condB) {
          _node.className = "ball active";
          selectedBalls[NodeType].push(addZero(number))
        }
      } else if (_node.className == "ball active") {
        _node.className = "ball";


        let index = selectedBalls[NodeType].indexOf(addZero(number))
        if (index > -1) {
          selectedBalls[NodeType].splice(index, 1)
        }
      }

      renderSelectedBalls()

    })
  });

  // 获取multiples所有节点
  let multiples = document.querySelectorAll('.multiple')
  // 添加监听事件，点击时添加active类并且移除其他节点的active类
  multiples.forEach(element => {
    element.addEventListener("click", function (e) {
      let node = e.target
      selectedMultiple = parseInt(node.innerHTML.replace('x', ''))

      // 移除其他节点的active类
      multiples.forEach(element => {
        element.className = 'multiple'
      })

      if (node.className == 'multiple') {
        node.className = 'multiple active'
      } else {
        node.className = 'multiple'
      }

      renderSelectedBalls()
    })
  })


  document.getElementById('sms').onclick = function () {
    window.location.href='sms:1069100019999?body=' + document.getElementById('sms').innerHTML
  }

  document.getElementById('rd').onclick = function () {
    selectedBalls['R'] = []
    selectedBalls['B'] = []

    selectedMultiple = [1,2,3,5,10,20,30][Math.floor(Math.random() * 7)]

    let rdNumberBlue = Math.floor(Math.random() * 16) + 1

    let ballsRed = NodeRootRedBall.querySelectorAll('.ball')
    for (let j = 0; j < ballsRed.length; j++) {
      ballsRed[j].className = "ball";
    }

    // 设置蓝球的ball元素高亮
    let ballsBlue = NodeRootBlueBall.querySelectorAll('.ball')
    for (let j = 0; j < ballsBlue.length; j++) {
      ballsBlue[j].className = "ball";
      if (ballsBlue[j].querySelector('span').innerHTML == addZero(rdNumberBlue)) {
        ballsBlue[j].className = "ball active";
      }
    }
    selectedBalls['B'] = [addZero(rdNumberBlue)]


    let rdNumber;
    for (let i = 1; i <= 6; i++) {
      rdNumber = Math.floor(Math.random() * 33) + 1
      // 设置红球的ball元素高亮

      for (let j = 0; j < ballsRed.length; j++) {
        if (ballsRed[j].querySelector('span').innerHTML == addZero(rdNumber)) {
          ballsRed[j].className = "ball active";
        }
      }

      selectedBalls['R'].push(addZero(rdNumber))
    }

      // 设置倍数的高亮
      multiples.forEach(element => {
        element.className = 'multiple'
      })

      for (let j = 0; j < multiples.length; j++) {
        if (multiples[j].innerHTML == selectedMultiple+'x') {
          multiples[j].className = "multiple active";
        }
      }

    renderSelectedBalls()
  }
})


function renderSelectedBalls() {
  if (selectedBalls['R'].length == 6 && selectedBalls['B'].length == 1) {
    document.getElementById("sms-box").style.display = 'flex'
    document.getElementById("amount-box").style.display = 'flex'
  } else {
    document.getElementById("amount-box").style.display = 'none'
    document.getElementById("sms-box").style.display = 'none'
    return false;
  }

  let NodeSms = document.getElementById("sms");

  selectedBalls['R'].sort()
  let formatSms = '00CP#01#' + selectedBalls['R'].join('') + '*' + selectedBalls['B'].join(' ') + '#' + selectedMultiple
  NodeSms.innerHTML = formatSms


  document.getElementById("amount").innerHTML = '￥' + (selectedMultiple * 2).toFixed(2)
}


// 生成球
function generateBall() {

  // 红球33个
  for (let i = 1; i <= 33; i++) {
    let NodeBall = document.createElement("div");
    NodeBall.className = "ball";
    NodeBall.innerHTML = '<span>' + addZero(i) + '</span>';
    NodeRootRedBall.appendChild(NodeBall);
  }
  // 蓝球16个
  for (let i = 1; i <= 16; i++) {
    let NodeBall = document.createElement("div");
    NodeBall.className = "ball";
    NodeBall.innerHTML = '<span>' + addZero(i) + '</span>';
    NodeRootBlueBall.appendChild(NodeBall);
  }
}

// 不足两位，在前面补0
function addZero(num) {
  return num < 10 ? '0' + num : num;
}